<template>
  <div class="app-container">
    <div class="el-toolbar">
      <div class="el-toolbar-body" style="justify-content: flex-start">
        <!-- 1.导入Excel数据 -->
        <el-button type="primary" size="small" icon="el-icon-download" @click="importData"><i class="fa fa-plus"/> 数据导入
        </el-button>
        <!-- 2.导出Excel数据 -->
        <el-button type="primary" size="small" icon="el-icon-upload2" @click="exportData"><i class="fa fa-plus"/> 数据导出
        </el-button>
      </div>
    </div>
    <el-card class="box-card" style="margin-top: 50px">
      <!-- 3.数据展示 -->
      <el-table
        :data="dictList"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称" width="150"></el-table-column>

        <el-table-column prop="dictCode" label="编码" width="150">
        </el-table-column>

        <el-table-column prop="value" label="值" width="150"></el-table-column>

        <el-table-column prop="createTime" label="创建时间"></el-table-column>
      </el-table>
      <!-- 4.点击导入后的弹出层组件 -->
      <el-dialog title="数据字典导入" :visible.sync="dialogImportVisible" width="400px">
        <el-form label-position="right" label-width="170px">
            <!--
                参数说明:
                  multiple表示时候支持上传多个文件;
                  on-success表示成功后调用的方法;
                  action表示请求上传的接口路径.
            -->
            <el-upload
              :multiple="false"
              drag
              :on-success="onUploadSuccess"
              :action="'http://localhost:8202/admin/cmn/dict/importData'"
              class="upload-demo">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip">说明:只能上传xls文件，且大小不能超过100MB</div>
            </el-upload>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogImportVisible = false">取消</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import dict from "@/api/hospital/dict";

export default {
  data() {
    return {
      /**
       * false: 不弹框;
       * true:  弹框
       */
      dialogImportVisible: false,
      dictList: [], //数据字典列表数组
    };
  },
  created() {
    // 查第1层
    this.getDictList(1);
  },
  methods: {
    /**
     * 点击后显示弹框组件
     */
    importData() {
      this.dialogImportVisible = true
    },
    /**
     * 上传成功后调用的方法
     */
    onUploadSuccess(response, file) {
      this.$message.info('上传成功')
      this.dialogImportVisible = false
      this.getDictList(1)
    },
    /**
     * 导出数据
     */
    exportData() {
      window.open("http://localhost:8202/admin/cmn/dict/exportData");
    },
    /**
     * 查询数据字典列表
     */
    getDictList(id) {
      dict.dictList(id).then((response) => {
        this.dictList = response.data.dictList;
      });
    },
    /**
     * 延迟加载
     */
    load(tree, treeNode, resolve) {
      dict.dictList(tree.id).then((response) => {
        resolve(response.data.dictList);
      });
    },
  },
};
</script>
